feat(argocd): migrate ArgoCD plugin from Material UI v4 to v5 by its-mitesh-kumar · Pull Request #9708 · backstage/community-plugins

its-mitesh-kumar · 2026-06-28T10:42:33Z

Description

Migrate the ArgoCD plugin from Material UI v4 (@material-ui/*) to Material UI v5 (@mui/material, @mui/icons-material). This replaces all makeStyles/createStyles patterns with MUI v5 styled() components and sx prop, updates all component imports to per-path MUI v5 imports, handles API breaking changes (e.g. palette.type → palette.mode, Chip/Drawer/Menu prop updates), and removes the legacy @material-ui/* dependencies from package.json.

UI before Changes

S_.2026-06-28.at.7.mp4

UI after changes

S_.2026-06-28.at.3.58.57.PM.mov

S_.2026-06-28.at.4.01.43.PM.mov

✔️ Checklist

A changeset describing the change and affected packages. (more info)
Added or Updated documentation
Tests for new functionality and regression tests for bug fixes
Screenshots attached (for UI changes)

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>

backstage-goalie · 2026-06-28T10:42:56Z

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage-community/plugin-argocd	workspaces/argocd/plugins/argocd	minor	`v2.9.0`

Copilot

Pull request overview

Migrates the @backstage-community/plugin-argocd frontend plugin from Material UI v4 (@material-ui/*) to MUI v5 (@mui/material, @mui/icons-material) by updating component imports and replacing makeStyles/createStyles usage with styled()/sx.

Changes:

Removed legacy @material-ui/* dependencies and updated lockfile accordingly.
Replaced style hooks with sx/styled() patterns across ArgoCD UI components.
Updated affected unit tests to align with the new component structure/styling approach.

Reviewed changes

Copilot reviewed 42 out of 43 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
workspaces/argocd/yarn.lock	Removes legacy `@material-ui/*` entries.
workspaces/argocd/plugins/argocd/src/hooks/useIconStyles.ts	Replaces `makeStyles` icon styles with `styled()`/inline style exports.
workspaces/argocd/plugins/argocd/src/hooks/useDarkTheme.ts	Switches theme access to MUI v5 `palette.mode`.
workspaces/argocd/plugins/argocd/src/components/DeploymentSummary/DeploymentSummary.tsx	Updates MUI imports to v5 component paths.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/RolloutStatusIcon.tsx	Replaces class-based icon styling/spin with wrapper + inline styles.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/RolloutStatus.tsx	Updates Chip import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/Rollouts.tsx	Replaces `makeStyles` with `sx` layout styles.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/Rollout.tsx	Replaces `makeStyles` container styles with `sx`.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/RevisionType.tsx	Updates Chip import/props for MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/RevisionStatus.tsx	Replaces class-based icon styling/spin with wrapper + inline styles.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/RevisionImage.tsx	Updates Typography import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/CanaryRevision.tsx	Replaces `makeStyles` with `sx` on Card.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/BlueGreenRevision.tsx	Updates MUI imports to v5 component paths.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/AnalysisRuns/AnalysisRunStatus.tsx	Replaces class-based icon styling/spin with wrapper + inline styles.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/revisions/AnalysisRuns/AnalysisRuns.tsx	Updates MUI imports and Chip usage for MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/rollouts/tests/RolloutStatusIcon.test.tsx	Updates test expectations for SpinWrapper structure.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesTableRow.tsx	Replaces `makeStyles` with `sx`/inline styles for table rows.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesTableHeader.tsx	Replaces `makeStyles` with `sx` on header cells.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesTable.tsx	Replaces `makeStyles` with `sx`/inline styles and updates MUI imports.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesSearchBar.tsx	Replaces `makeStyles` and v4 icons with MUI v5 `sx` + icons.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesKebabMenuOptions.tsx	Updates Menu/IconButton imports and styling approach for MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/resource/DeploymentMetadata.tsx	Replaces `makeStyles` with a shared style object used via `sx`.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/resource/DeploymentHistoryCommit.tsx	Converts `className` usage to `sx` and updates imports.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/resource/DeploymentHistory.tsx	Converts container styling to `sx` and updates imports.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/tests/ResourcesTable.test.tsx	Updates pagination label assertion for MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleHeader.tsx	Updates IconButton import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleDrawer.tsx	Replaces Drawer `classes` styling with `PaperProps.sx` and updates imports.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycleCard.tsx	Replaces `makeStyles` with `sx` on Card.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/DeploymentLifecycle.tsx	Replaces `makeStyles` with a `styled()` container and updates theme mode usage.
workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/tests/DeploymentLifecycle.test.tsx	Updates ThemeProvider/createTheme usage for MUI v5 and `palette.mode`.
workspaces/argocd/plugins/argocd/src/components/Common/PermissionAlert.tsx	Replaces `@material-ui/lab` Alert imports with MUI v5 equivalents.
workspaces/argocd/plugins/argocd/src/components/Common/MetadataItemWithTooltip.tsx	Updates Typography/Tooltip imports to MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/MetadataItem.tsx	Updates Typography import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/Metadata.tsx	Updates Typography import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/AppServerLink.tsx	Updates Tooltip/Typography imports to MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/AppNamespace.tsx	Updates Chip/Typography imports and Chip variant for MUI v5.
workspaces/argocd/plugins/argocd/src/components/Common/AppCommitLink.tsx	Replaces `makeStyles` and v4 Skeleton import with MUI v5 patterns.
workspaces/argocd/plugins/argocd/src/components/AppStatus/StatusIcons.tsx	Replaces class-based icon styling/spin with wrapper + inline styles.
workspaces/argocd/plugins/argocd/src/components/AppStatus/AppSyncStatus.tsx	Updates Chip import to MUI v5.
workspaces/argocd/plugins/argocd/src/components/AppStatus/AppHealthStatus.tsx	Updates Chip import to MUI v5.
workspaces/argocd/plugins/argocd/package.json	Removes legacy `@material-ui/*` dependencies and adds/keeps MUI v5 deps.
workspaces/argocd/plugins/argocd/dev/index.tsx	Updates Box import to MUI v5.
workspaces/argocd/.changeset/migrate-argocd-mui-v5.md	Adds a changeset documenting the MUI v4→v5 migration.

Comments suppressed due to low confidence (1)

workspaces/argocd/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/resource/DeploymentHistoryCommit.tsx:69

aria-disabled is currently set to true when commitUrl exists (!!commitUrl), which is inverted. Also, when commitUrl is null this renders href="", creating a focusable link to the current page. Set aria-disabled when there is no URL and omit href when absent.

          <Link
            aria-disabled={!!commitUrl}
            href={commitUrl ?? ''}
            target="_blank"
            rel="noopener"
          >

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

Copilot

Pull request overview

Copilot reviewed 44 out of 45 changed files in this pull request and generated 2 comments.

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

invincibleJai · 2026-06-29T05:22:05Z

/cc @Eswaraiahsapram

Eswaraiahsapram

Thanks @its-mitesh-kumar , looks good to me. I just added few comments PTAL

Eswaraiahsapram · 2026-06-30T05:25:42Z


  return revisions && latestRevision ? (
-    <div className={classes.commitContainer}>
+    <div style={{ maxWidth: '280px' }}>


I think this loses the theme connection. It should use

Suggested change

<div style={{ maxWidth: '280px' }}>

<Box sx={{ maxWidth: theme => theme.spacing(35) }}>

Eswaraiahsapram · 2026-06-30T05:32:03Z

+    mt: 1,
+    mb: 1,


Optional:

The object is typed as SxProps<Theme> and consumed via sx prop, so mt/mb work. But they only work in sx context.

Suggested change

mt: 1,

mb: 1,

marginTop: '8px',

marginBottom: '8px',

Eswaraiahsapram · 2026-06-30T05:37:24Z

+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'baseline',
+              }}
+            >


Suggested change

<div

style={{

display: 'flex',

flexDirection: 'row',

justifyContent: 'space-between',

alignItems: 'baseline',

}}

>

<Box

sx={{

display: 'flex',

flexDirection: 'row',

justifyContent: 'space-between',

alignItems: 'baseline',

}}

>

Eswaraiahsapram · 2026-06-30T05:39:59Z

+                <div
+                  data-testid="no-resources"
+                  style={{
+                    padding: '16px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                  }}
+                >


Suggested change

<div

data-testid="no-resources"

style={{

padding: '16px',

display: 'flex',

justifyContent: 'center',

}}

>

<Box

data-testid="no-resources"

sx={{

p: 2,

display: 'flex',

justifyContent: 'center',

}}

>

Eswaraiahsapram · 2026-06-30T05:46:57Z

-      className={styles.canaryItem}
-      style={{ width: '500px' }}
+      sx={{
+        width: '500px',


Since inline style always wins over CSS classes, the actual rendered width was always 500px. In that case why we have that dead code 🤔 (In the old code).

Eswaraiahsapram · 2026-06-30T05:49:48Z

+      sx={theme => ({
+        border: `1px solid ${theme.palette.grey.A100}`,
+        ml: 1.875,
+        borderRadius: '4px',


Suggested change

borderRadius: '4px',

borderRadius: theme.spacing(0.5)

debsmita1

tested the PR locally.

But the eslint rule to check for MUI4 imports is missing

feat(argocd): migrate ArgoCD plugin from Material UI v4 to v5

ecc4217

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>

Copilot AI review requested due to automatic review settings June 28, 2026 10:42

its-mitesh-kumar requested review from a team, CryptoRodeo, Eswaraiahsapram, HusneShabbir, caugello, christoph-jerolimov, ciiay, debsmita1, divyanshiGupta, djanickova, dzemanov, jrichter1, karthikjeeyar, lokanandaprabhu and rohitkrai03 as code owners June 28, 2026 10:42

its-mitesh-kumar requested a review from awanlin June 28, 2026 10:42

backstage-service added the workspace/argocd label Jun 28, 2026

Copilot started reviewing on behalf of its-mitesh-kumar June 28, 2026 10:42 View session

Copilot AI reviewed Jun 28, 2026

View reviewed changes

its-mitesh-kumar added 2 commits June 28, 2026 17:24

addressing copilot comments

1426846

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

updating e2e tests

3d241d6

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

Copilot AI review requested due to automatic review settings June 28, 2026 13:20

Copilot started reviewing on behalf of its-mitesh-kumar June 28, 2026 13:20 View session

Copilot AI reviewed Jun 28, 2026

View reviewed changes

Comment thread ...d/plugins/argocd/src/components/DeploymentLifeCycle/sidebar/resources/ResourcesSearchBar.tsx

Comment thread workspaces/argocd/plugins/argocd/package.json Outdated

addressing copilot comments

5da0470

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

Eswaraiahsapram reviewed Jun 30, 2026

View reviewed changes

debsmita1 requested changes Jul 3, 2026

View reviewed changes

	<div style={{ maxWidth: '280px' }}>
	<Box sx={{ maxWidth: theme => theme.spacing(35) }}>

-    mt: 1,
-    mb: 1,
+    marginTop: '8px',
+    marginBottom: '8px',

Uh oh!

Conversation

its-mitesh-kumar commented Jun 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

UI before Changes

UI after changes

✔️ Checklist

Uh oh!

backstage-goalie Bot commented Jun 28, 2026

Changed Packages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

invincibleJai commented Jun 29, 2026

Uh oh!

Eswaraiahsapram left a comment

Choose a reason for hiding this comment

Uh oh!

Eswaraiahsapram Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Eswaraiahsapram Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Eswaraiahsapram Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Eswaraiahsapram Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Eswaraiahsapram Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Eswaraiahsapram Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

debsmita1 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

its-mitesh-kumar commented Jun 28, 2026 •

edited

Loading